<template>
    <van-action-sheet v-model:show="store.state.ifshowplaylist" title="当前播放" class="playlist">
        <div class="clearword" @click="clearall">清空当前列表<van-icon name="delete-o" /></div>
        <div class="line" v-for="item in store.state.playlist" @click="goplay(item.id)">
            <span :class="{ 'red': item.id == store.state.nowplay.id }">{{ item.name }}</span>
            <span class="ar">-{{ item.ar[0].name }}</span>
            <van-icon name="cross" class="icon_false" @click="deleteoinplaylist($event,item.id)"/>
        </div> 
        <!-- <van-swipe-cell v-for="item in store.state.playlist" @click="goplay(item.id)">
            <van-cell :border="false" :title="item.name" :value="item.ar[0].name" />
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell> -->
    </van-action-sheet>

</template>

<script setup>

import { ref } from 'vue'
import { useStore } from 'vuex' // 引入useStore 方法
import { useRouter } from 'vue-router';

const router = useRouter()
const store = useStore()
const goplay = (id) => {
    store.state.nowplay.id = id
    store.commit('changesong')
}
const deleteoinplaylist = ($event,id)=>{
    $event.stopPropagation()
    console.log('111')
    store.state.playlist = store.state.playlist.filter(item => item.id !== id)
}
const clearall = ()=>{
    store.state.playlist = []
}
</script>


<style scoped>
.red {
    color: #EC4141;
}

.line {
    margin: 30px;
    font-size: 18px;
}

.ar {
    color: #BBBBBB;
    font-size: 10px;
    margin: 10px;

}

.icon_false {
    color: #BBBBBB;
    font-size: 10px;
    margin: 10px;
    float: right;
}
.playlist{
    min-height: 500px;
}
.clearword{
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
}
</style>